<template>
    <div id="first">

        <Titlebar id="bar"></Titlebar>
        <div id="second" ref="second" @scroll="scroll">
            <img :src="banner.img" id="banner">
            <div id="swiper">
                <Swiper :list="lunbo" auto loop></Swiper>
            </div>
            <Nine></Nine>
            <Recommend></Recommend>
            <Scroll></Scroll>
            <div id="top">
                <span @touchstart="shoppingupload">上传商品</span>
                <span class="fa fa-arrow-up" id="jiantou" @touchstart="top"></span>
            </div>
            <div id="footer">
                <p id="yidong" @touchstart="upup">移动端</p>
                <p> 沪ICP备13034501号-2 </p>
                <p>光橙（上海）信息科技有限公司 版权所有 </p>
                <p id="phone">客服热线：400-820-6098 </p>
                <p>上海市浦东新区盛夏路399号亚芯片科技园一号楼</p>
            </div>
            <div id="cart">
                <span class="fa fa-shopping-cart" @touchstart="cart"></span>
            </div>
        </div>

    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import { Swiper } from 'vux';
import Titlebar from "../components/Titlebar.vue"
import Nine from "../components/Nine.vue"
import Recommend from "../components/Recommend.vue"
import Seckill from "../components/Seckill.vue"
import Scroll from "../components/Scroll.vue"

export default {
    data: function() {
        return {
            banner: {},

        }
    },
    components: {
        Titlebar,
        Nine,
        Swiper,
        Recommend,
        Seckill,
        Scroll

    },
    mounted: function() {
        this.http.get("/api/banner")
            .then(res => {
                this.banner = res.data.msg[0]

            })
        this.$store.dispatch("requestlunbo");


    },
    computed: {
        ...mapState([
            "lunbo"
        ])
    },
    methods: {
        shoppingupload: function() {
            location.hash = "/shoppingupload"
        },
        cart: function() {
            location.hash = "/cart"
        },
        top: function() {
            //    this.$refs.second.scrollTop = 0;
            var a = setInterval(() => {
                this.$refs.second.scrollTop -= 50;
                if (this.$refs.second.scrollTop ==0) {
                    clearInterval(a)
                }
            }, 10)

            if (this.$refs.second.scrollTop < 100) {
                clearInterval(a)
            }


        },
        scroll: function() {

        },
        upup: function() {
            location.hash = "/upupload"
        }
    }

}
</script>

<style scoped>
/* #first {
     height: 100vh; 
     overflow-y: scroll; 
} */

#second {
    height: 93vh;
    overflow-y: scroll;
    margin-top: 7vh;
}

#banner {
    /* margin-top: 7vh; */
    cursor: pointer;
    width: 100%;
    height: 20vh;
}

#swiper {
    margin-top: -1vh;
}

p {
    margin: 0;
    padding-top: 2vh;
}

#top {
    width: 100%;
    height: 8vh;
    line-height: 8vh;
    border: solid 1px #dbdbdb;
}

#top span {
    cursor: pointer;
    margin-left: 5vw;
    font-size: 13px;
    color: red;
}

#footer {
    width: 100%;
    height: 40vh;
    text-align: center;
    font-size: 13px;
    color: grey;
    background-color: #EFEFEF;
}

#yidong {
    font-size: 16px;
    color: black;
}

#phone {
    color: black;
}

#top #jiantou {
    color: gray;
    font-size: 20px;
    margin-left: 60vw;
}

#first {
    position: relative;
}

#cart {
    cursor: pointer;
    width: 50px;
    height: 50px;
    border: solid 1px #FC4A00;
    border-radius: 50%;
    position: fixed;
    bottom: 7vh;
    right: 5vw;
    text-align: center;
    font-size: 30px;
    background-color: #FC4A00;
    color: white;
}
</style>